<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Vue Props 示例</title>
		<script src="../js/vue.js"></script>
		<style>
			.parent-component {
				border: 2px solid red;
			}

			.child-component {
				border: 2px solid blue;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<parent-component :parent-data="parentData"></parent-component>
		</div>

		<script>
			Vue.component('parent-component', {
				template: `
        <div class="parent-component">
          <h2>父组件将parentData值传递给内部的child-component组件作为 childData</h2>
          <child-component :child-data="parentData"></child-component>
        </div>
      `,
				props: ['parentData'],
				data() {
					return {}
				}
			});

			Vue.component('child-component', {
				template: `
        <div class="child-component">
          <h3>父组件在使用这个子组件时，可以传递 childData 的值给子组件。</h3>
          <button @click="modifyData">修改数据</button>
        </div>
      `,
				props: ['childData'],
				methods: {
					modifyData() {
						//直接尝试修改了从父组件传递进来的 childData 的值
						//不符合 Vue 单向数据流原则的错误做法，Vue 会在控制台中发出警告。
						//通常，子组件应该通过触发事件通知父组件来修改数据，而不是直接修改父组件传递的属性值。
						this.childData = '修改后的值';
					}
				}
			});

			var app = new Vue({
				el: '#app',
				data: {
					parentData: '初始值'
				}
			});
		</script>
	</body>

</html>